<template>
  <div class="hello-world">
    <h2>欢迎使用 Element Plus</h2>
    <p>这是一个符合Vue3规范的项目示例</p>
    
    <div class="card">
      <el-button type="primary" @click="count++">计数: {{ count }}</el-button>
      <el-button @click="showDialog = true">打开对话框</el-button>
    </div>

    <el-dialog v-model="showDialog" title="提示" width="30%">
      <span>你好！这是一个 Element Plus 对话框。</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="showDialog = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
interface Props {
  msg?: string
}

// TypeScript方式声明props
defineProps<Props>()

// 组件状态
const count = ref(0)
const showDialog = ref(false)
</script>

<style scoped>
.hello-world {
  text-align: center;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.card {
  margin-top: 2rem;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 